<template>
      <div class="min-h serveProject bg-wt">
        <div class="baseList">
<!-- 新增按钮 -->
          <div class="newBox">
            <button class="bt wt-120" @click="handleBulid()">
                新增护理项目
            </button>
        </div>
          <div class="tableBoxs">
            <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
            <t-table  
            row-key="index" 
            :data="data" 
            :columns="COLUMNS" 
            vertical-align="middle"
            :hover="hover"
            tabel-content-width="100%"
            table-layout="fixed"
            resizable
            lazy-load>
            <!-- 序号处理 -->
              <template #rowIndex="{ rowIndex }">{{ rowIndex + 1 }}</template>
                 <!-- 价格处理 -->
              <template #price="{ row }"> {{ isDecimals(row.price) ? row.price : row.price + '.00' }} </template>
              <!-- 图片处理 -->
              <template #image="{ row }">
                <div>
                  <div class="tdesign-demo-image-viewer__base">
                    <t-image-viewer :images="[row.image]">
                      <template #trigger="{ open }">
                        <div class="tdesign-demo-image-viewer__ui-image">
                          <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                          <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                            <span>
                              <BrowseIcon size="1.4em" /> 预览
                            </span>
                          </div>
                        </div>
                      </template>
                    </t-image-viewer>
                  </div>
                </div>
              </template>
              <!-- 操作栏 -->
              <template #op="{ row }">
                <div class="operateCon">
        <a class="btn-dl" @click="handleClickDelete(row)">删除</a>
        <a class="font-bt" @click="handleEdit(row)">编辑</a>
        <a
              class="delete"
              :class="
                  row.status === 1
                  ? 'btn-dl'
                  : 'font-bt'
              "
              @click="handleForbidden(row)"
              >{{ row.status === 1 ? '禁用' : '启用' }}</a
            >
    </div>
      </template>
                 </t-table>
                 <t-pagination v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize" :total="pagination.total"
      @change="onChange" />
          </div>
        </div>
      </div>
  </template>
  
  <script lang="tsx" setup>
  import { ref } from 'vue';
  import { COLUMNS } from "../constants";
  
  
  const hover = ref(false);
 
  // const getList = async () => {
  //   const res = await getProjectList({
  //     pageNum: pagination.value.pageNum,
  //     pageSize: pagination.value.pageSize,
  //   });
  //   console.log("返回数据",res);
  //   data.value = res.data.records;
  //   total.value = res.data.total;
  // };
  
  //价格判断
  const isDecimals = (num: number): boolean => {
    return num % 1 != 0;
  }


const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },
  pagination: {
    type: Object,
    default: () => {
      return {}
    }
  },
})
  //分页查询

  const emit = defineEmits(['onChange','handleBulid','handleEdit','handleClickDelete','handleForbidden'])

  //分页调整
const onChange = (pageInfo) =>{
    emit('onChange',pageInfo)
}
//新增按钮
const handleBulid = () =>{
  emit('handleBulid')
  console.log("表格页面接到了点击新增按钮事件")
}
//编辑链接
const handleEdit = (row) =>{
  emit('handleEdit',row)
  console.log("表格页面接到了点击编辑按钮事件")
}

//删除链接
const handleClickDelete = (row) =>{
  emit('handleClickDelete',row)
  console.log("表格页面接到了点击删除按钮事件")
}

// 禁用链接
const handleForbidden = (row) => {
    emit('handleForbidden', row)
}
  
  // const onChange = (pageInfo) => {
  //   console.log(pageInfo);
  //   pagination.value.pageNum = pageInfo.current;
  //   pagination.value.pageSize = pageInfo.pageSize;
  //   getList();
  // };
  

  
  
  </script>
  <style scoped>
  .tdesign-demo-image-viewer__ui-image {
    width: 100%;
    height: 100%;
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: var(--td-radius-small);
    overflow: hidden;
  }
  
  .tdesign-demo-image-viewer__ui-image--hover {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--td-text-color-anti);
    line-height: 22px;
    transition: 0.2s;
  }
  
  .tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
    opacity: 1;
    cursor: pointer;
  }
  
  .tdesign-demo-image-viewer__ui-image--img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    position: absolute;
  }
  
  .tdesign-demo-image-viewer__ui-image--footer {
    padding: 0 16px;
    height: 56px;
    width: 100%;
    line-height: 56px;
    font-size: 16px;
    position: absolute;
    bottom: 0;
    color: var(--td-text-color-anti);
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    box-sizing: border-box;
  }
  
  .tdesign-demo-image-viewer__ui-image--title {
    flex: 1;
  }
  
  .tdesign-demo-popup__reference {
    margin-left: 16px;
  }
  
  .tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
    cursor: pointer;
  }
  
  .tdesign-demo-image-viewer__base {
    width: 60px;
    height: 60px;
    margin: 5px;
    border: 4px solid var(--td-bg-color-secondarycontainer);
    border-radius: var(--td-radius-medium);
  }


.tdesign-demo-block-column {
  width: 100%;
}
  
  </style>